<template>
    <div class="meal_ticket">
        <el-form class="demo-ruleForm" :model="mealTicket" ref="publicMealTicketSubmitForm" @submit.native.prevent>
            <el-form-item label="" prop="donorNo" :rules="[{ required: true, message: '不能为空'}
        ]">
                <el-input class="donorNo-input" placeholder="请扫描献血浆者编号" v-model.number="mealTicket.donorNo" v-focus @keyup.enter.native="publicMealTicketSubmit('publicMealTicketSubmitForm')">
                    <template slot="prepend">
                        <div style="font-size:20px;">请扫描献血浆者编号</div>
                    </template>
                </el-input>
            </el-form-item>
        </el-form>
        <div class="publicMealTicketCount">
            <el-tag style="font-size: 30px;" :model="mealTicket.count">已发{{mealTicket.count}}</el-tag>
        </div>        
    </div>
    </template>
    
    <script>
    import {
        isRegister,
        publicMealTicketCount,
        publicMealTicket
    } from "@/api/plasma";
    import {
        Notification,
        MessageBox,
        Message,
        Loading
    } from 'element-ui'
    import Vue from 'vue';

    
    Vue.prototype.indicators = undefined;
    
    export default {
        name: "plasmaMealTicket",
        data() {
            return {
                mealTicket: {
                    donorNo: '',
                    count: 0
                }
            }
        },
        created: function () {
            this.publicMealTicketCount()
        },
        methods: {
            publicMealTicketSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) { //验证通过后
                        isRegister(this.mealTicket.donorNo).then(res => {
                            publicMealTicket(this.mealTicket.donorNo).then(res => {
                                Message({
                                    message: '发放成功',
                                    type: 'success'
                                })
                                this.publicMealTicketCount()
                            })
                            this.$refs[formName].resetFields();
                            /*
                            MessageBox.confirm("确定发放餐券吗？", "系统提示").then(() => {
                                publicMealTicket(this.mealTicket.donorNo).then(res => {
                                    Message({
                                        message: '发放成功',
                                        type: 'success'
                                    })
                                    this.publicMealTicketCount()
                                })
                                this.$refs[formName].resetFields();
                            }).catch(() => {
                                this.$refs[formName].resetFields();
                                Message({
                                    message: '已取消发放',
                                    type: 'info'
                                })
                            })
                            */
                        }).catch(() => {
                                this.$refs[formName].resetFields();
                            })
    
                    } else {
                        this.publicMealTicketCount()
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            publicMealTicketCount() {
                console.log("获取已发餐券数量")
                publicMealTicketCount().then(res => {
                    this.mealTicket.count = res.msg
                });
            },
            silentPrint() {
                
            }
        },
        directives: {
            focus: {
                inserted: function (el) {
                    el.querySelector('input').focus()
                }
            }
        }
    };
    </script>
    
    <style lang="scss">
    .meal_ticket {
        .donorNo-input .el-input__inner {
            height: 100px;
            font-size: 20px
        }
    
        .cell {
            text-align: center;
        }
    
        .publicMealTicketCount {
            text-align: center;
    
            .el-tag {
                height: 50px;
                line-height: 50px
            }
        }
    
        .header {
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        margin-top:100px;
        padding:20px;
        justify-content: center;
        align-items: center;
        height: 100%;
        /*background-image: url("../assets/images/login-background.jpg");*/
        background-size: cover;
    }
    
    .title {
        margin: 0px auto 30px auto;
        text-align: center;
        color: #707070;
    }
    
    .el-meal_ticket-footer {
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }
    
    .meal_ticket-code-img {
        height: 38px;
    }
    @page {
        size: auto;
        margin: 1mm;
    }
    </style>
    